<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器   语法：任意选择器：hover【悬停】 每个伪类选择器，具备特点 
			               所有元素具备：hover    【常见伪类选择类】
			*/
		   h1:hover{
			   background: #ffaa00;
			   color: #00ffff;
		   }	
		   /**
			* 伪类选择器：  link   链接未点击时状态
			*              active 链接被点击时状态
			*              visited 链接点击后状态
			*              hover   悬停链接时状态
			* 主要结合在一起，针对a元素效果
			*/
			a:link{/*未访问状态*/
			color:#00ff00;
			/*去掉超链接下划线*/
			text-decoration: none;
			}
			a:active{/*被点击时状态*/
				color: #aaaaff;
				background: #ffff00;
			}
			a:visited{/*点击后状态*/
				color: #aaaaff;
				background: #ffaa00;
			}
			a:hover{
				font-size: 36px;
			}	
			/**
			 * 伪类选择器：input  focus  获取焦点  鼠标点击输入框时效果
			 * 
			 针对  输入框  input元素
			 */
			input:focus{
				background: #ffff00;
			}
			/*伪类选择器：   :first-child  第一个儿子元素
			                ：last-child  最后一个儿子元素
							：nth-child(n) 匹配n个儿子元素
			针对： 父子级，默认父子级 table,列表。。
			*/
		   li:first-child{
			   background: #00ff00;
			   color: #00ff00;
		   }
		   li:last-child{
			   font-size: 15pt;
		   }
		   li:nth-child(2){
			   background: #ffaa00;
			   font-size: 15px;
		   }
		   li:nth-child(3){
			   background: #ffaa00;
			   font-size: 15px;
		   }
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text">
		<!-- 元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
		<li>唐山</li>
		<li>邢台</li>
		<li>承德</li>
		<li>保定</li>
		</ol>
	</body>
</html>